import { useNavigate } from 'react-router-dom'
import { RiArrowLeftSLine } from 'react-icons/ri'
import { NavBar } from 'antd-mobile'
import { useMeta } from '@/stores'
import './index.less'

type PropsType = {
  title?: string
  leftContent?: React.ReactNode | string
  rightContent?: React.ReactNode | string
}

const Header = (props: PropsType) => {

  const {
    title,
    leftContent,
    rightContent,
  } = props

  const navigate = useNavigate()
  const { meta } = useMeta((state) => state)
  const leftArrow = (meta.keywords !== 'menu-page' ? <RiArrowLeftSLine size={30} /> : false)

  const handleBack = () => {
    navigate(-1)
  }

  return <NavBar
    className='c-nav-bar'
    backIcon={leftArrow}
    left={leftContent}
    right={rightContent}
    onBack={handleBack}
  >{title || meta.title}</NavBar>
}

export default Header
